<template>
  <div class="search-index">
    <Header></Header>
    <section>
      <div class="search-history" v-if="searchArr.length">
        <h2>
          <i class="iconfont icon-shijian"></i>
          <span>历史搜索</span>
          <span class="iconfont icon-shanchu" @click="deleteStorage">
            清空</span
          >
        </h2>
        <ul>
          <li v-for="(item, index) in searchArr" :key="index">{{ item }}</li>
        </ul>
      </div>
      <div v-else class="no">暂无搜索记录...</div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
import Header from "@/components/search/Header.vue";
export default {
  name: "Search-index",
  data() {
    return {
      searchArr: [],
    };
  },
  created() {
    this.searchArr = JSON.parse(localStorage.getItem("searchList")) || [];
  },
  components: {
    Header,
  },
  methods: {
    // 清空搜索关键词
    deleteStorage() {
      // mint-ui库提供提示框
      MessageBox({
        title: "提示",
        message: "您确定要清空全部记录吗?",
        showCancelButton: true,
      }).then((res) => {
          if(res == 'confirm'){
            // 清空本地存储
            localStorage.removeItem('searchList')
            // 清除保留的数据
            this.searchArr=[]
          }
      })
    },
  },
};
</script>

<style scoped lang="scss">
.search-index {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section {
  flex: 1;
  overflow: hidden;
  background-color: #f5f5f5;
  .no {
    padding: 0.133333rem;
    font-size: 0.48rem;
  }
}
.search-history {
  h2 {
    position: relative;
    padding: 0.533333rem;
    font-weight: 400;
    font-size: 0.48rem;
    i {
      padding-right: 3px;
      color: red;
      font-size: 0.48rem;
    }
    span:last-child {
      position: absolute;
      right: 0.533333rem;
      color: red;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.266667rem;
    li {
      margin: 0.266667rem;
      padding: 0.08rem 0.16rem;
      font-size: 0.373333rem;
      border: 1px solid #ccc;
    }
  }
}
</style>